<template>
  <div class="hello" key="no">
    <!-- <span>这是个HEOOL组件的随机数{{Math.random()}}</span>
    <c-a></c-a>
    <span style="color: red;font-size: 20px">{{lApp.test}}</span>-->
    <i-form ref="form" :model="formValidate" :rules="ruleValidate">
      <i-form-item label="用户名" prop="name">
        <i-input v-model="formValidate.name"></i-input>
      </i-form-item>
      <i-form-item label="邮箱" prop="mail">
        <i-input v-model="formValidate.mail"></i-input>
      </i-form-item>
      <i-form-item label="选择" prop="option">
        <i-check-box v-model="formValidate.option"></i-check-box>
      </i-form-item>
      <i-check-box-group v-model="testGroup">
        <i-check-box label="one">第一个</i-check-box>
        <i-check-box label="two">第二个</i-check-box>
        <i-check-box label="three">第三个</i-check-box>
      </i-check-box-group>
    </i-form>

    <!-- <div class="divText">
      <span v-for="(item, index) in 10" :key='index' class="spanPY" :ls-title='item'>item</span>
    </div>-->
    <button @click="handleSubmit">提交</button>
    <button @click="handleReset">重置</button>
    <button @click="updatatestGroup">updatatestGroup</button>
    <el-button @click="hText">test</el-button>
    <!-- <audio
      :src='getUrl(texts)'
      id="audio"
      ref="audio"
    ></audio>
    <button @click="play">播放</button>-->
  </div>
</template>

<script>
import CA from "./compA";
import iForm from "../form/form.vue";
import iFormItem from "../form/form-item.vue";
import iInput from "./input/input.vue";
import iCheckBox from "./checkbox/checkbox.vue";
import iCheckBoxGroup from "./checkbox/checkbox-group";
import { findComponentUpward } from "../utils/assist";
export default {
  inject: ["lApp"],
  mtAttr: "asd",
  components: { iForm, iFormItem, iInput, CA, iCheckBox, iCheckBoxGroup },
  name: "HelloWorld",
  mounted() {},
  data() {
    return {
      testGroup: ["one", "three"],
      audio: null,
      texts:
        "“你写你的世界，我读你的心声。” 这里有诗歌、散文、成语故事、课文范读、绘本故事。。。 您正好需要，我正好专业。 所以同律金声。",
      iip: "",
      mtTest: "",
      test: "test msg",
      formValidate: {
        name: "",
        mail: "",
        option: false
      },
      ruleValidate: {
        name: [{ required: false, message: "用户名不能为空", trigger: "blur" }],
        mail: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { type: "email", message: "邮箱格式不正确", trigger: "blur" }
        ],
        option: [
          { required: "array", message: "选项不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.$nextTick(() => {
      this.audio = this.$refs.audio;
    });
  },
  computed: {},
  methods: {
    hText() {
      this.$LAlert({
        content: "this is hText box",
        duration: 3
      });
    },
    updatatestGroup() {
      this.testGroup = [];
    },
    play() {
      this.audio.play();
    },
    getUrl(t) {
      return `https://fanyi.baidu.com/gettts?lan=zh&text=${t}&spd=5&source=web`;
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          window.alert("提交成功");
        } else {
          window.alert("表单校验失败");
        }
      });
    },
    handleReset() {
      this.$emit("test-click");
      console.log("handleReset");
      this.$refs.form.resetFields();
    }
  },
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.spanPY::after {
  content: attr(ls-title);
  position: absolute;
  top: -100%;
  left: 0;
}
.spanPY {
  position: relative;
  padding: 5px;
}
#audio {
  width: 100px;
  height: 50px;
}
</style>
